<template>
    <div id="teamAddpage">
        <van-form @submit="onSubmit">
        <van-cell-group inset>
            <van-field
            v-model="form.name"
            name="name"
            label="队伍名称"
            placeholder="请输入队伍名称"
            :rules="[{ required: true, message: '请输入队伍名称' }]"
            />
            <van-field
            v-model="form.description"
            rows="2"
            autosize
            label="队伍简介"
            type="textarea"
            maxlength="512"
            placeholder="请输入队伍简介"
            show-word-limit
            />
            <van-field name="maxNum" label="队伍人数">
                <template #input>
                    <van-stepper v-model="form.maxNum" :min="2" :max="10"/>
                </template>
            </van-field>
            <van-field
            v-model="form.expireTime"
            is-link
            readonly
            name="datePicker"
            label="时间选择"
            placeholder="过期时间"
            @click="showPicker = true"
            :rules="[{ required: true, message: '请输入过期时间' }]"
            />
            <van-popup v-model:show="showPicker" position="bottom">
                <van-date-picker @confirm="onConfirm" @cancel="showPicker = false" />
            </van-popup>
            <van-field name="radio" label="队伍状态">
                <template #input>
                    <van-radio-group v-model="form.status" direction="horizontal">
                    <van-radio :name="0">公开</van-radio>
                    <van-radio :name="2">加密</van-radio>
                    </van-radio-group>
                </template>
            </van-field>
            <van-field
            v-if="form.status === 2"
            v-model="form.password"
            type="text"
            name="密码"
            label="密码"
            placeholder="请输入密码"
            :rules="[{ required: true, message: '请填写密码' }]"
            />
        </van-cell-group>
        <div style="margin: 16px;">
            <van-button round block type="success" native-type="submit" @click="addTeam">
            创建队伍
            </van-button>
        </div>
        </van-form>
    </div>
</template>

<style scoped>
</style>

<script setup>
import { ref, reactive } from 'vue'
import Myaxios from '../plugins/MyAxios';
import router from '../router';
import { showToast } from 'vant';

const form = reactive({
  description: "",
  expireTime: "",
  maxNum: 0,
  name: "",
  password: "",
  status: 0
});
const fileList = ref([{ url: '' }]);
const showPicker = ref(false);
const onConfirm = ({ selectedValues }) => {
    form.expireTime = selectedValues.join('-');
    showPicker.value = false;
};

const addTeam = async () => {
    const res = await Myaxios.post('/addTeam',form);
    if(res.data.code == 200){
        showToast("创建成功");
        router.push({
            path: '/team',
            replace: true
        })
    }
    else{
        showToast("创建失败，" + res.data.msg);
    }
}


</script>